<template>
  <div class="selectBox">
    <div class="selected" @click="showFunc">{{ selectItem }}</div>
    <div class="selectItems" v-if="isShow">
        <span v-for="item in selectData.items" :key="item.id" @click="selectFunc(item.name)">
            {{ item.name }}
        </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watchEffect } from 'vue';

const selectData = reactive({
    items:[
        {
            id: 1,
            name:'小明',
        },
        {
            id: 2,
            name: '小华'
        },
        {
            id: 3,
            name: '小刘'
        },
    ]
})
let selectItem = ref("请选择你的要找的人")
let isShow = ref(false)

const selectFunc = (item: string) => {
    selectItem.value = item
    isShow.value = !isShow.value
}

const showFunc = () => {
    isShow.value = !isShow.value
}


</script>

<style lang="less">
.selectBox {
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-family:'Times New Roman', Times, serif;
    .selected {
        cursor: pointer;
        text-align: center;
        width: 100%;
        border: 1px solid gray;
        border-radius: 5px;
    }
    .selectItems {
        margin-top: 10px;
        width: 100%;
        text-align: center;
        border: 1px solid gray;
        border-radius: 5px;
        span {
            display: block;
            cursor: pointer;
            width: 100%;
        }
        &::after {
            position: absolute;
            top: 35px;
            content: "";
            width: 0;
            height: 0;
            border-bottom: 5px solid gray;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
        }
    }
}
</style>